<template>
    <div>
        <ZZDialog class="settings-tool" @close='callbackClose()'>
            <div v-for="o in toolsdata.children" :key="o.name" class="text item" @click="opentools(o.name)">
                <i :class=o.icon></i> {{ o.label }}
            </div>
        </ZZDialog>
        <Bookmark v-if="showBookMark" @close="showBookMark=!showBookMark"></Bookmark>
        <Measure v-if="showMeasure" @close="showMeasure=!showMeasure"></Measure>
        <Location v-if="showLocation" @close="showLocation=!showLocation"></Location>
        <AddMarker v-if="showMarker" @close="showMarker=!showMarker"></AddMarker>
        <Print v-if="showPrint" @close="showPrint=!showPrint"></Print>
        <Analysis v-if="showAnalysis" @close="showAnalysis=!showAnalysis"></Analysis>
        <mapCompare v-if="showmapCompare" @close="showmapCompare=!showmapCompare"></mapCompare>
        <navXZQH v-if="shownavXZQH" @close="shownavXZQH=!shownavXZQH"></navXZQH>
        <queryRoute v-if="showqueryRoute" @close="showqueryRoute=!showqueryRoute"></queryRoute>
        <roamLine v-if="showroamLine" @close="showroamLine=!showroamLine"></roamLine>
        <mapSwipe v-if="showmapSwipe" @close="showmapSwipe=!showmapSwipe"></mapSwipe>
    </div>

</template>
  
<script>

import ZZDialog from '../common/ZZDialog.vue';

export default {
    components:{
        ZZDialog,
        'Bookmark': () => import(`./tools/bookmark/Bookmark.vue`),
        'Measure': () => import(`./tools/measure/index.vue`),
        'Location': () => import(`./tools/location.vue`),
        'AddMarker':()=>import(`./tools/addmarker/index.vue`),
        'Print':()=>import(`./tools/print/index.vue`),
        'Analysis':()=>import(`./tools/analysis/index.vue`),
        'mapCompare':()=>import(`./tools/mapCompare/index.vue`),
        'navXZQH':()=>import(`./tools/navXZQH/index.vue`),
        'queryRoute':()=>import( `./tools/queryRoute/index.vue`),
        'roamLine':()=>import(`./tools/roamLine/index.vue`),
        'mapSwipe':()=>import(`./tools/mapSwipe/index.vue`)
    },
    data() {
        return {
            show:false,
            toolsdata:
            {
                "name": "工具",
                "icon": "fa fa-cubes",
                "children": [
                    { "name": "bookMark", "icon": "fa fa-tags", "label": "视角书签"},
                    { "name": "measure", "icon": "fa fa-calculator", "label": "图上量算"},
                    { "name": "location", "icon": "fa fa-map-pin", "label": "坐标定位"},
                    { "name": "addmarker", "icon": "fa fa-edit", "label": "我的标记"},
                    { "name": "print", "icon": "fa fa-print", "label": "地图打印"},
                    { "name": "analysis", "icon": "fa fa-bar-chart", "label": "空间分析"},
                    { "name": "mapCompare", "icon": "fa fa-window-restore", "label": "分屏对比"},
                    { "name": "navXZQH", "icon": "fa fa-paper-plane", "label": "地区导航"},
                    { "name": "queryRoute", "icon": "fa fa-level-up", "label": "路线导航"},
                    { "name": "roamLine", "icon": "fa fa-send-o", "label": "飞行漫游"},
                    { "name": "mapSwipe", "icon": "fa-columns", "label": "卷帘对比"},
                ]
            },
            showBookMark:false,
            showMeasure:false,
            showLocation:false,
            showMarker:false,
            showPrint:false,
            showAnalysis:false,
            showmapCompare:false,
            shownavXZQH:false,
            showqueryRoute:false,
            showroamLine:false,
            showmapSwipe:false
        }
    },
    methods: {
        opentools(name) {
            switch (name) {
                case 'bookMark':
                    this.showBookMark = !this.showBookMark
                    break;
                case 'measure':
                    this.showMeasure = !this.showMeasure
                    break;
                case 'location':
                    this.showLocation = !this.showLocation
                    break;
                case 'addmarker':
                    this.showMarker = !this.showMarker
                    break;
                case 'print':
                    this.showPrint = !this.showPrint
                    break;
                case 'analysis':
                    this.showAnalysis = !this.showAnalysis
                    break;
                case 'mapCompare':
                    this.showmapCompare = !this.showmapCompare
                    break;
                case 'navXZQH':
                    this.shownavXZQH = !this.shownavXZQH
                    break;
                case 'queryRoute':
                    this.showqueryRoute = !this.showqueryRoute
                    break;
                case 'roamLine':
                    this.showroamLine = !this.showroamLine
                    break;
                case 'mapSwipe':
                    this.showmapSwipe = !this.showmapSwipe
                    break;
                default:
                    break;
            }
        },
        callbackClose(){
            this.$emit('close') 
        }
    }
}
</script>
<style scoped>
.flex-grow {
    flex-grow: 1;
}

.settings-tool {
    position: absolute;
    right: 10px;
    top: 50px;
    width: 100px;
    height: auto;
}

.item {
    margin: 10px;
    text-align: center;
    cursor: pointer;
}
</style>